<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      @cell-click="tEdit"
      ref="table"
      :row-class-name="tableRowClassName"
      :cell-class-name="tableCellClassName"
    >
      <el-table-column
        prop="dataDateUnit"
        label="品类"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-for="(month, index) in months"
        :key="index"
        :prop="'salesData.' + index"
        :label="month"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
      <script>
export default {
  props: {
    tableDataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tableData: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份
    };
  },
  watch: {
    tableDataList: {
      handler: function (newnew, oldold) {
        // console.log(JSON.stringify(this.tableDataList));
        if (JSON.stringify(this.tableDataList) == "[]") {
          return;
        } else {
          this.init();
          this.$nextTick(() => {
            this.$refs["table"].doLayout();
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    rowStyle({ row, rowIndex }) {
      // return "font-weight: bold;";
      if (rowIndex == this.tableData.length - 1) {
        return " position: sticky;bottom: 0;font-weight: bold;";
      } else {
        return "";
      }
    },
    tableCellClassName({ column, columnIndex }) {
      // return "font-weight: bold;";
      if (column.label === "合计") {
        return "highlight-row";
      } else {
        return "";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      // return "font-weight: bold;";
      if (row.dataDateUnit === "合计") {
        return "highlight-row";
      } else {
        return "";
      }
    },
    init() {
      this.tableData = []; // 用于存储转换后的数据
      this.months = []; // 用于存储所有月份
      // 提取所有月份
      this.tableDataList.forEach((item) => {
        for (const month in item.keywordProperty) {
          // const element = array[index];
          if (!this.months.includes(month)) {
            this.months.push(month);
          }
        }
      });
      // console.log(JSON.stringify(this.months));

      this.tableDataList.forEach((item) => {
        const row = {
          dataDateUnit: item.dataDateUnit,
          salesData: [],
        };
        this.months.forEach((month) => {
          row.salesData.push(item.keywordProperty[month]);
        });
        this.tableData.push(row);
      });
    },

    tEdit(row) {
      this.$emit("getsaleComprehensiveStatistics", row.dataDateUnit);
    },
  },
};
</script>
<style lang="scss" >
/* 添加你想要的特定行的CSS样式 */
.highlight-row {
  position: sticky;
  bottom: 0;
  font-weight: bold;
}
</style>